<template>
  <div class="main-message">
    <!-- 返回顶部 -->
    <template>
      <el-backtop></el-backtop>
    </template>
    <h1>Message</h1>
    <el-input
      type="textarea"
      :autosize="{ minRows: 6, maxRows: 10 }"
      placeholder="请输入您的留言或宝贵建议"
      v-model="textarea"
    >
    </el-input>
    <div class="submit">
      <el-button type="info" @click="reset">重置</el-button>
      <el-button type="primary" @click="submit" :loading="loading"
        >提交</el-button
      >
    </div>
    <!-- 留言列表 -->
    <div class="message-list">
      <el-card
        class="box-card"
        v-for="(item, index) in messageList"
        :key="index"
      >
        <div>
          &nbsp;&nbsp;&nbsp;&nbsp;<span>{{ item.msg }}</span>
        </div>
        <div class="right">
          <i class="el-icon-user-solid"></i>
          <span>{{ item.author }}</span>
        </div>
        <div class="right">
          <i class="el-icon-timer"></i>
          <span>{{ item.timeStamp }}</span>
        </div>
      </el-card>
    </div>
    <!-- 分页 -->
    <div class="center">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @prev-click="previousPage"
        @next-click="nextPage"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textarea: "",
      loading: false,
      messageList: [],
      total: 10,
      pageSize: 7
    };
  },
  methods: {
    getMessage(page, size) {
      let that = this;
      // 载入遮罩
      const loading = that.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      that.$axios
        .get("/blog/getMessage", {
          page: page,
          size: size
        })
        .then(res => {
          if (
            res.data.success &&
            res.data.code == 0 &&
            res.data.messageList.length > 0
          ) {
            that.messageList = res.data.messageList;
            that.total = res.data.totle;
            loading.close();
          } else {
            that.total = 0;
            loading.close();
            this.$message({
              message: "暂无留言！",
              type: "warning"
            });
          }
        });
    },
    reset() {
      this.textarea = "";
    },
    submit() {
      this.loading = true;
      if (this.textarea.replace(/(^\s*)|(\s*$)/g, "").length == 0) {
        this.$message({
          message: "留言内容不能为空！",
          type: "warning"
        });
        this.loading = false;
        return false;
      } else {
        this.$axios
          .post("/blog/addMessage", {
            message: this.textarea
          })
          .then(res => {
            if (res.data.success && res.data.code == 0) {
              this.$message({
                message: "留言成功！",
                type: "success"
              });
              this.textarea = "";
              this.loading = false;
              this.getMessage("1", "7");
            } else if (res.data.msg == "用户未登录") {
              this.$alert("登录后留言", "通知", {
                confirmButtonText: "确定",
                callback: action => {
                  this.$router.push("/login");
                }
              });
            } else {
              this.$message.error(res.data.msg);
              this.loading = false;
            }
          });
      }
    },
    previousPage(val) {
      this.getMessage(val, "7");
    },
    nextPage(val) {
      this.getMessage(val, "7");
    },
    handleCurrentChange(val) {
      this.getMessage(val, "7");
    }
  },
  mounted() {
    this.getMessage("1", "7");
  }
};
</script>

<style lang="less" scoped>
.main-message {
  width: 100%;
  height: 100%;
}
.submit {
  margin-top: 10px;
  text-align: right;
}
.box-card {
  margin-top: 10px;
}
.right {
  text-align: right;
  color: #8a8a8a;
}
.center {
  text-align: center;
  margin-top: 10px;
}
</style>